<template>
    <!-- 歌曲详情页 -->
    <div id="inSong">
        <Nav></Nav>
        <div class="body">
            <div class="top">
                <div class="songImgDiv">
                    <img :src="'/api/' + songImg" alt="" class="songImg">
                </div>
                <div class="text">
                    <span>歌曲名：{{ songName }}</span><br>
                    <span>歌手名：{{ singerName }}</span><br>
                    <el-button class="but" @click="playAll">播放</el-button>
                </div>
            </div>
            <div>
                <div v-for="(item, index) in songWord" :key="index" style="display: block;width: 100%;text-align: left; margin-left: 40px;">
                    <span style="width: 100%;">{{ item }}</span><br>
                </div>
            </div>
            <!-- 评论 -->
            <div>
                <span>评论</span>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
import Nav from "../components/nav.vue";
import Footer from "../components/footer.vue";
export default {
    data() {
        return {
            id: this.$route.query.id,
            songImg: "",
            singerName: "",
            songWord: [],
            songName: "",
            songData:null,
        }
    },
    components: {
        Nav,
        Footer
    },
    methods: {
        playAll: function () {
            // console.log(this.songData);
            let arr = [];
            // this.songData.forEach(i => {
            //     arr.unshift(i)
            // });
            arr.push(this.songData)
            // console.log(arr);
            arr.forEach(x => {
                let song = {
                    name: x.songName,
                    artist: x.singerName,
                    url: '/api/' + x.url,
                    cover: '/api/' + x.imgUrl,
                    lrc: x.songWord,
                    songsId: x.songsID,
                    time: x.time
                };
                for (const i in this.$audio) {
                    if (this.$audio[i].songsId == x.songsID) {
                        this.$audio.splice(i, 1);
                        break;
                    }
                }
                this.$audio.unshift(song)
            });
            // console.log(this.$audio);
            this.$router.push("/music")
            // this.$audio = 
        },
    },
    created: function () {
        this.axios({
            url: "/api/listens/dotSong",
            params: {
                songsID: this.id
            }
        }).then(res => {
            this.songData = res.data.data.data
            this.songImg = res.data.data.data.imgUrl
            this.singerName = res.data.data.data.singerName.join()
            this.songName = res.data.data.data.songName
            res.data.data.data.songWord.split("[").forEach(i => {
                this.songWord.push(i.split("]")[1])
            });
        }).catch(err => {
            console.log("歌曲错误");
        })
    }
};
</script>

<style>
#inSong {
    text-align: center;
    margin: 0px;
    padding: 0px;
}

#inSong .body {
    width: 80%;
    background: plum;
    margin: 10px auto;
    /* text-align: left; */
    display: flex;
    flex-wrap: wrap;
}

#inSong .body .top {
    width: 100%;
    /* flex-grow: 1; */
    display: flex;
    text-align: left;
    margin: 40px 0px;
}

#inSong .body .top .songImgDiv {
    margin: 0px auto;
    flex-grow: 1;
}

#inSong .body .top .songImgDiv .songImg {
    width: 250px;
    height: 250px;
    margin-left: 40px;
}

#inSong .body .top .text {
    /* margin-left: 20px; */
    flex-grow: 4;
}

#inSong .body .top .text .but {
    margin-top: 80px;
}
</style>